<template>
    <div class="shopContainer">
        
        <!-- 收获地址 -->
        <div>我的收获地址</div>

        <!-- 购物车列表 -->
        <div class="cartlist">
            <div class="item" v-for="item in carData" :key="item.id">
                <van-checkbox icon-size="24px"
                  v-model="$store.getters.getGoodsSelected[item.id]" 
                  @click="checkBoxChange(item.id,$store.getters.getGoodsSelected[item.id])"
                  checked-color="#ee0a24" />
                <div class="imgWrap">
                    <img src="http://test.w0824.com/huaweiry2.png">
                </div>
                <div class="info">
                    <div class="title">iphone6</div>
                    <div class="area">
                        <div class="price">&yen;{{ item.price }}</div>
                        <van-stepper theme="round" 
                        v-model="$store.getters.getGoodsNumber[item.id]"
                        @change="changeNumber(item.id,$store.getters.getGoodsNumber[item.id])"
                         button-size="22" disable-input />
                        <van-button type="danger" @click="delCarGoods(item.id)">删除</van-button>
                    </div>
                </div>
            </div>
            
        </div>

        <!-- 提交订单 -->
        <van-submit-bar :price="$store.getters.getCarTotalPrice" button-text="提交订单">
            <template #tip>
                默认仅支持微信支付
            </template>
            <template #default>
                共选中 {{ $store.getters.getCarSelectedTotal }} 件
            </template>
        </van-submit-bar>
    </div>
</template>

<script>
export default {
    data() {
        return {
            carData: this.$store.state.carData
        }
    },
    methods: {
        checkBoxChange(id,selected){
            // commit=>mutation
            // console.log(id,selected)
            this.$store.commit('updCarGoodsSelected',{id,selected})
        },
        changeNumber(id,number){
            this.$store.commit('updCarGoodsNumber',{id,number})
        },
        delCarGoods(id){
            this.$store.commit('delCarGoods',id)
        }
    },
}
</script>

<style lang="scss" scoped>
.shopContainer {
    .cartlist {
        .item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 4px;
            background-color: #fff;
            border-radius: 6px;
            margin: 6px 0;

            .imgWrap {
                width: 50px;
                height: 50px;
                padding: 4px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .info {
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .title {
                    width: 70vw;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                }

                .area {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .price {
                        color: #ff424a;
                    }
                }
            }
        }
    }

    .van-submit-bar {
        bottom: 50px;
    }
}


</style>